/* eslint-disable import/no-commonjs */
import { Image } from '@tarojs/components';
import { useMemo } from 'react';
import './index.scss';

const kaixinguo = require('./images/kaixinguo.svg');
const hetao = require('./images/hetao.svg');
const xiaweiyiguo = require('./images/xiaweiyiguo.svg');
const huasheng = require('./images/huasheng.svg');
const bigenguo = require('./images/bigenguo.svg');
const kuihuazi = require('./images/kuihuazi.svg');
const songzi = require('./images/songzi.svg');
const xiguazi = require('./images/xiguazi.svg');
const badanmu = require('./images/badanmu.svg');
const yaoguo = require('./images/yaoguo.svg');
const danhuangsu = require('./images/danhuangsu.svg');
const dangao = require('./images/dangao.svg');
const binggan = require('./images/binggan.svg');
const buding = require('./images/buding.svg');
const tangguo = require('./images/tangguo.svg');
const qiaokeli = require('./images/qiaokeli.svg');
const hongzao = require('./images/hongzao.svg');
const candou = require('./images/candou.svg');
const putaogan = require('./images/putaogan.svg');
const manyuemei = require('./images/manyuemei.svg');
const sakura = require('./images/sakura.svg');
const sapling = require('./images/sapling.svg');
const clover = require('./images/clover.svg');
const tree = require('./images/tree.svg');
const daisy = require('./images/daisy.svg');
const filter = require('./images/filter.svg');
const increase = require('./images/increase.svg');
const notepad = require('./images/notepad.svg');
const deleteIcon = require('./images/delete.svg');
const sort = require('./images/sort.svg');
const fenpei = require('./images/fenpei.svg');
const female = require('./images/female.svg');
const male = require('./images/male.svg');
const baohusan = require('./images/baohusan.svg');
const shuaxin = require('./images/shuaxin.svg');

export enum EIcon {
  TopIcon,
  StatusIcon,
  Action,
  Gender
}

export const IconTypeArray = [
  'kaixinguo',
  'hetao',
  'xiaweiyiguo',
  'huasheng',
  'bigenguo',
  'kuihuazi',
  'songzi',
  'xiguazi',
  'badanmu',
  'yaoguo',
  'danhuangsu',
  'dangao',
  'binggan',
  'buding',
  'tangguo',
  'qiaokeli',
  'hongzao',
  'candou',
  'putaogan',
  'manyuemei'
];

const IconTypeMapping = {
  ['kaixinguo']: kaixinguo,
  ['hetao']: hetao,
  ['xiaweiyiguo']: xiaweiyiguo,
  ['huasheng']: huasheng,
  ['bigenguo']: bigenguo,
  ['kuihuazi']: kuihuazi,
  ['songzi']: songzi,
  ['xiguazi']: xiguazi,
  ['badanmu']: badanmu,
  ['yaoguo']: yaoguo,
  ['danhuangsu']: danhuangsu,
  ['dangao']: dangao,
  ['binggan']: binggan,
  ['buding']: buding,
  ['tangguo']: tangguo,
  ['qiaokeli']: qiaokeli,
  ['hongzao']: hongzao,
  ['candou']: candou,
  ['putaogan']: putaogan,
  ['manyuemei']: manyuemei
};

export const StatusIconTypeArray = ['sapling', 'clover', 'daisy', 'sakura', 'tree'];

const StatusIconTypeMapping = {
  ['sapling']: sapling,
  ['clover']: clover,
  ['daisy']: daisy,
  ['sakura']: sakura,
  ['tree']: tree
};

export const ActionIconTypeArray = [
  'increase',
  'shaixuan',
  'notepad',
  'delete',
  'fenpei',
  'baohusan',
  'shuaxin'
];

const ActionIconTypeMapping = {
  ['increase']: increase,
  ['filter']: filter,
  ['notepad']: notepad,
  ['delete']: deleteIcon,
  ['sort']: sort,
  ['fenpei']: fenpei,
  ['baohusan']: baohusan,
  ['shuaxin']: shuaxin
};

export const GnederIconTypeArray = ['female', 'male'];

const GenderIconTypeMapping = {
  ['female']: female,
  ['male']: male
};

interface ITopIconProps {
  type: EIcon;
  name: string;
  className?: string;
  size?: number;
  onClick?: () => void;
}

const TopIcon = (props: ITopIconProps) => {
  const imageSrc = useMemo(() => {
    switch (props.type) {
      case EIcon.TopIcon:
        return IconTypeMapping[props.name];
      case EIcon.StatusIcon:
        return StatusIconTypeMapping[props.name];
      case EIcon.Action:
        return ActionIconTypeMapping[props.name];
      case EIcon.Gender:
        return GenderIconTypeMapping[props.name];
      default:
        return '';
    }
  }, [props.name, props.type]);

  return (
    <Image
      {...props}
      src={imageSrc}
      style={
        props.size
          ? { width: `${props.size}rpx`, height: `${props.size}rpx` }
          : { width: '55rpx', height: '55rpx' }
      }
    />
  );
};
export default TopIcon;
